<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="demo">{{ fullName }}</div>
  </body>
</html>
<script src="../js/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#demo",
    data: {
      firstName: "Foo",
      lastName: "Bar",
    },
    computed: {
      // fullName: function () {
      //   return this.firstName + " " + this.lastName;
      // },
      // 计算属性也是属性
      fullName: {
        // getter
        get: function () {
          return this.firstName + " " + this.lastName;
        },
        // setter 用于修改属性，计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
        set: function (newValue) {
          var names = newValue.split(" ");
          this.firstName = names[0];
          this.lastName = names[names.length - 1];
        },
      }
    },
  });
</script>
